import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class OrderPage extends StatefulWidget {
  const OrderPage({super.key});

  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {
  final List _waterFallList = [
    {
      "img":
          "https://img2.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
      "title": "抓怕到了这张，哈哈～有点可爱",
      "name": '躺呀官方',
      "isvip": false,
      "mumber": 12,
      "avator":
          'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
    },
    {
      "img":
          "https://mstatic.gaodunwangxiao.com/origin/2023/03/14/微信图片_20221117115104-1678765155706.jpg",
      "title": "2020赛季LPL夏半决赛上RNG 2:0 iG率先进入决赛",
      "name": '躺呀官方',
      "isvip": true,
      "mumber": 123,
      "avator":
          'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
    },
    {
      "img":
          "https://mstatic.gaodunwangxiao.com/origin/2023/03/14/微信图片_20221117115104-1678765155706.jpg",
      "title": "抓怕到了这张，哈哈～有点可爱",
      "name": '躺呀官方',
      "isvip": false,
      "avator":
          'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
    },
    {
      "img":
          "https://mstatic.gaodunwangxiao.com/origin/2023/03/14/微信图片_20221117115104-1678765155706.jpg",
      "title": "抓怕到了这张，哈哈～有点可爱",
      "name": '躺呀官方',
      "isvip": false,
      "mumber": 12,
      "avator":
          'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
    },
    {
      "img":
          "https://mstatic.gaodunwangxiao.com/origin/2023/03/14/微信图片_20221117115104-1678765155706.jpg",
      "title": "抓怕到了这张，哈哈～有点可爱",
      "name": '躺呀官方',
      "isvip": false,
      "mumber": 12,
      "avator":
          'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
    },
    {
      "img":
          "https://mstatic.gaodunwangxiao.com/origin/2023/03/14/微信图片_20221117115104-1678765155706.jpg",
      "title": "抓怕到了这张，哈哈～有点可爱",
      "name": '躺呀官方',
      "isvip": true,
      "mumber": 12,
      "avator":
          'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
    }
  ];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 10; i++) {
      _waterFallList.add({
        "img":
            "https://mstatic.gaodunwangxiao.com/origin/2023/03/14/微信图片_20221117115104-1678765155706.jpg",
        "title": "抓怕到了这张，哈哈～有点可爱",
        "name": '躺呀官方',
        "isvip": false,
        "mumber": 12,
        "avator":
            'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(10),
        margin: EdgeInsets.fromLTRB(0, 150.h, 0, 20.h),
        child: MasonryGridView.count(
          // 展示几列
          crossAxisCount: 2,
          // 元素总个数
          itemCount: _waterFallList.length,
          // 单个子元素
          itemBuilder: (BuildContext context, int index) =>
              waterCard(_waterFallList[index]),
          // 纵向元素间距
          mainAxisSpacing: 15.h,
          // 横向元素间距
          crossAxisSpacing: 10.w,
          //本身不滚动，让外面的singlescrollview来滚动
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true, //收缩，让元素宽度自适应
        ),
      ),
    );
  }

  Widget waterCard(Map item) {
    return Container(
      // height: item,
      decoration: BoxDecoration(
          // border: Border.all(color: Colors.yellow, width: 1),
          borderRadius: BorderRadius.circular(10)),
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network('${item["img"]}'),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(0, 10.h, 0, 13.h),
            child: Text(
              "${item["title"]}",
              style: TextStyle(
                  color: const Color(0xff222222),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  const CircleAvatar(
                    radius: 10,
                    backgroundImage: NetworkImage(
                        'https://mstatic.gaodunwangxiao.com/image/2022/09/23/52ca8abf661c9c5c2799fe2cf0583ea6-1663924586527.png'),
                  ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(7.w, 0, 2.w, 0),
                    child: Text(
                      "${item["name"]}",
                      style: TextStyle(
                        color: const Color.fromRGBO(102, 102, 102, 1),
                        fontSize: 12.sp,
                      ),
                    ),
                  ),
                  item['isvip'] as bool
                      ? Image.asset('assets/images/vip.png',
                          height: 12.w, width: 12.w)
                      : const Text('')
                ],
              ),
              Row(
                children: [
                  Text(
                    "${item["mumber"] ?? 0}",
                    style: TextStyle(
                      color: const Color.fromRGBO(102, 102, 102, 1),
                      fontSize: 12.sp,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 15.w),
                    child: Image.asset('assets/images/show2.png',
                        height: 16.w, width: 16.w),
                  )
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}
